﻿@model List<Capokun.Models.Song>
@{
    ViewBag.Title = "Liste de chansons de Capoeira";
    ViewBag.Description = "Voici la liste de toutes les chansons de Capoeira que vous pouvez trouver sur Capokun.";
    Layout = "~/Views/Shared/_Layout_fr-FR.cshtml";
}
<section id="contentSongList" class="body">
    <div id="tabs">
        <script>
            $(function () {
                $("#tabs").tabs({});
            });
            $(document).ready(function () {
            $('a[href|="#tabs-1"]').click(function () {
                window.location = "@Url.Action("All")";
            });
            $('a[href|="#tabs-2"]').click(function () {
                window.location = "@Url.Action("Favorites")";
            });
            $('a[href|="#tabs-3"]').click(function () {
                window.location = "@Url.Action("Create")";
            });
        });
        </script>
        <ul>
            <li>
                <a href="#tabs-1">Tous</a></li>
            <li>
                <a href="#tabs-2">Favoris</a></li>
            <li>
                <a href="#tabs-3">Créer une nouvelle chanson</a></li>
        </ul>
        <div id="tabs-1">
            @*<div id="filter">
            </div>*@
            <div id="songList">
                @if (Model.Count > 1)
                {
                    foreach (var song in Model)
                    {
                    <div class="ui-corner-all" onclick="location.href='@Url.Action(song.SongId, "Songs")'" style="cursor: pointer;">
                        <h4>@song.SongId</h4>
                        <br />
                        @*<span>@Capokun.Tools.HtmlRemoval.StripTagsRegex(song.Content)</span>*@ <span>@Html.Raw(song.Content)</span>
                    </div>
                    }
                }
            </div>
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
        @*   <div id="songContent" class="ui-tabs-panel ui-widget-content ui-corner-bottom ">
            @if (Model.Count <= 1)
            {
                foreach (var song in Model)
                {
                <script>
                    var songJson = {
                        "SongId": "@song.SongId",
                        "SubmittedBy": "@song.SubmittedBy"
                    };
                    var htmlContent = createMVCContent(songJson);
                    $("#songContent").html(htmlContent);
                    ///hide song list
                    $("#tabs-1").css("display", "none");
                </script>
                <h2>
                    @song.SongId</h2>
                <br />
                @Html.Raw(song.Link);
                <br />
                @Html.Raw(song.Content);
                }
            }
        </div>*@
    </div>
</section>
<section id="contentMobile" class="body">
    Appareil mobile detecté!
<br />Une application mobile a été faite pour une visualisation optimisé pour les peties écrans.
<br /> <a href="@Url.Content("~/App_EN.htm")" >Aller vers l'application mobile here</a>
</section>
